<template>
    <div>
        <!-- 报价 -->
        <!-- {{qutoData}} -->
        <el-descriptions title="询价信息" :labelStyle="{ width: '90px' }" :column="2">
            <el-descriptions-item label="产品型号">{{
                queryInfo.partnumber
            }}</el-descriptions-item>
            <el-descriptions-item label="品牌">{{
                queryInfo.brand
            }}</el-descriptions-item>
            <el-descriptions-item label="数量">{{
                queryInfo.quantity
            }}</el-descriptions-item>
            <!-- <el-descriptions-item label="批次">{{
          queryInfo.dateCode
        }}</el-descriptions-item>
        <el-descriptions-item label="封装">{{
          queryInfo.package
        }}</el-descriptions-item> -->
            <el-descriptions-item label="接受价">{{
                queryInfo.adoptPrice && (queryInfo.adoptPrice * 1).toFixed(6)
            }}</el-descriptions-item>
            <!-- <el-descriptions-item label="币种">{{
          queryInfo.currency == "CNY" ? "人民币" : "美元"
        }}</el-descriptions-item>
        <el-descriptions-item label="交货日期">{{
          queryInfo.deliveryDate
        }}</el-descriptions-item>
        <el-descriptions-item label="交货地">{{
          queryInfo.deliveryPlace == "FArea01" ? "国内" : "香港"
        }}</el-descriptions-item>
        <el-descriptions-item label="包装">{{
          queryInfo.packing
        }}</el-descriptions-item>
        <el-descriptions-item label="发票类型">{{
          queryInfo.invoiceType
        }}</el-descriptions-item>
        <el-descriptions-item label="剩余报价时间">
          <span style="color: #e02020" v-remainedTime="qutoData">{{
            (0 >= queryInfo.quoteRemainMin * 1
              ? "已结束"
              : queryInfo.quoteRemainMin) | manageTime
          }}</span>
        </el-descriptions-item> -->
        </el-descriptions>
        <label style="color: #008fff; display: block; margin: 20px">报价信息</label>
        <el-form :model="ruleForm" :rules="rules" ref="form" label-suffix=":" label-width="100" label-position="left">
            <el-form-item label="" v-show="isShowCheckbox" class="isAccept">
                <el-checkbox v-model="isAccept" @change="handleAccept" name="quto">
                    同意接受价
                </el-checkbox>
            </el-form-item>
            <el-form-item label="报价" prop="unitPrice">
                <!-- <template v-if="isAccept">
            {{ruleForm.unitPrice}}
          </template>
          <template v-else> -->
                <el-input-number :controls="false" v-inpNum align="left" :max="999999999" :precision="6"
                    v-model="ruleForm.unitPrice" style="margin-left: 27px;"></el-input-number>
                <!-- </template> -->
            </el-form-item>
            <el-form-item label="币种" prop="currency">
                <!-- <template v-if="isAccept">
            {{ruleForm.currency=="CNY"||ruleForm.currency=="1"?"人民币":"美元"}}
          </template>
          <template v-else> -->
                <el-select v-model="ruleForm.currency" @change="changeOptions($event)" style="margin-left: 27px;"> 
                    <el-option label="人民币" v-if="!isSommer" value="CNY"></el-option>
                    <el-option label="美元" v-if="!isSommer" value="USD"></el-option>
                    <el-option label="人民币" v-if="isSommer" value="1"></el-option>
                    <el-option label="美元" v-if="isSommer" value="2"></el-option>
                </el-select>

                <!-- </template> -->
            </el-form-item>
            <el-form-item label="报价数量" prop="quantity">
                <!-- <template v-if="isAccept">
            {{ruleForm.quantity}}
          </template>
          <template v-else> -->
                <el-input-number :controls="false" v-inpNum.noquto :max="999999999" :precision="0"
                    v-model="ruleForm.quantity"></el-input-number>
                <!-- </template> -->
            </el-form-item>
            <el-form-item label="交货日期" prop="deliveryDate">
                <!-- <template v-if="isAccept">
            {{ruleForm.quantity}}
          </template>
          <template v-else> -->
                <el-date-picker v-model="ruleForm.deliveryDate" :picker-options="pickerOption" type="date"
                    value-format="yyyy-MM-dd" placeholder="选择日期">
                </el-date-picker>
                <!-- </template> -->
            </el-form-item>
            <el-form-item label="批次" prop="dateCode" class="dateCode"  style="margin-left: 8px;">
                <!-- <template v-if="isAccept">
            
          </template>
          <template v-else> -->
                <el-input v-model="ruleForm.dateCode" maxlength="30" type="text" show-word-limit style="margin-left: 28px;"></el-input>
                <!-- </template> -->
            </el-form-item>
            <el-form-item label="交货地" prop="deliveryPlace">
                <!-- <template v-if="isAccept">
            {{ruleForm.deliveryPlace=="FArea01"?"国内":"香港"}}
          </template>
          <template v-else> -->
                <el-select v-model="ruleForm.deliveryPlace" style="margin-left: 15px;">
                    <el-option label="国内" value="FArea01"></el-option>
                    <el-option label="香港" value="FArea02"></el-option>
                </el-select>
                <!-- </template> -->
            </el-form-item>
            <el-form-item label="报价公司" prop="supplierID">
                <el-select v-model="ruleForm.supplierID" @change="handlesupplierChange">
                    <el-option v-for="item in suppliers" :label="item.supplierName" :value="item.supplierID"
                        :key="item.supplierID">
                    </el-option>
                </el-select>
            </el-form-item>


            <!-- <el-form-item label="报价有效期" prop="termDate" v-show="false"> -->
            <!-- <template v-if="isAccept">
            {{ruleForm.quantity}}
          </template>
          <template v-else> -->
            <!-- <el-date-picker v-model="ruleForm.termDate" :picker-options="pickerOption" type="date"
                    value-format="yyyy-MM-dd" placeholder="选择日期">
                </el-date-picker> -->
            <!-- </template> -->
            <!-- </el-form-item> -->

        </el-form>
        <div class="foot" v-loading="btnLoading">
            <el-button type="primary" size="small" @click="handleConfirmQuto">
                确认报价</el-button>
            <!-- <el-button plain size="small" @click="$emit('close')">取消</el-button> -->
            <el-button type="primary" size="small" @click="handleNotQuto">取消报价</el-button>
        </div>
    </div>
</template>
<script>
import {
    TaskQuote,
    UnableQuote,
    SearchQuote,
    getSuppliers,
    SearchClaim,
} from "@/api/scsapi/index";
import { mapGetters } from "vuex";
import { nextDate } from "@/utils";
export default {
    name: "quto",
    props: {
        isShowCheckbox: {
            default: true,
            type: Boolean,
        },
        isActurl: {
            default: true,
            type: Boolean,
        },
        qutoData: {
            default: () => {
                return {};
            },
            type: Object,
            required: true,
        },
        isSommer: {
            default: false,
            type: Boolean,
        },
    },
    data() {
        return {
            // 是否同意接受价
            isAccept: false,
            btnLoading: false,
            ruleForm: {
                unitPrice: undefined,
                currency: undefined,
                quantity: undefined,
                deliveryDate: undefined,
                dateCode: undefined,
                deliveryPlace: undefined,
                supplierID: undefined,
                supplierName: undefined,
                summary: "",
                termDate: nextDate(), // 请选择报价有效期
            },

            pickerOption: {
                disabledDate(time) {
                    return time.getTime() < Date.now() - 8.64e7;
                },
            },

            rules: {
                unitPrice: [{ required: true, message: "请输入报价", trigger: "blur" }],
                currency: [
                    { required: true, message: "请选择币种", trigger: "change" },
                ],
                quantity: [{ required: true, message: "请输入数量", trigger: "blur" }],
                deliveryDate: [
                    { required: true, message: "请选择交货日期", trigger: "change" },
                ],
                termDate: [
                    { required: true, message: "请选择报价有效期", trigger: "change" },
                ],
                dateCode: [
                    // { required: true, message: '请输入批次', trigger: 'blur' },
                    { min: 0, max: 50, message: "长度0-50", trigger: "blur" },
                ],
                deliveryPlace: [
                    { required: true, message: "请选择交货地", trigger: "change" },
                ],
                supplierID: [
                    { required: true, message: "请选择报价公司", trigger: "change" },
                ],
            },
            suppliers: [],
        };
    },
    computed: {
        ...mapGetters(["id"]),
        queryInfo() {
            if (!this.isSommer) {
                return {
                    partnumber: this.qutoData.product_partnumber,
                    brand: this.qutoData.product_brand,
                    quantity: this.qutoData.quantity,
                    dateCode: this.qutoData.product_dateCode,
                    package: this.qutoData.product_package,
                    adoptPrice: this.qutoData.adoptPrice,
                    currency: this.qutoData.currency,
                    deliveryDate: this.qutoData.deliveryDate,
                    deliveryPlace: this.qutoData.deliveryPlace,
                    packing: this.qutoData.product_packing,
                    quoteRemainMin: this.qutoData.quoteRemainMin,
                    invoiceType: this.qutoData.invoiceType,
                };
            } else {
                return {
                    partnumber: this.qutoData.partNumber,
                    brand: this.qutoData.brand,
                    quantity: this.qutoData.quantity,
                    dateCode: this.qutoData.dateCode,
                    package: this.qutoData.package,
                    adoptPrice: this.qutoData.unitPrice,
                    currency: this.qutoData.currency,
                    deliveryDate: this.qutoData.deliveryDate,
                    deliveryPlace: this.qutoData.district,
                    packing: this.qutoData.packing,
                    quoteRemainMin: this.qutoData.remainQuoteDuration,
                    invoiceType: this.qutoData.invoiceType,
                };
            }
        },
    },
    created() {
        getSuppliers().then((res) => {
            if (res.status == 200) {
                this.suppliers = res.data;
            }
        });
    },
    mounted() {
        // this.$set(this.ruleForm, "unitPrice", this.qutoData.adoptPrice ? this.qutoData.adoptPrice : 0);
        // this.$set(this.ruleForm, "currency", this.qutoData.currency);
        // this.$set(this.ruleForm, "quantity", this.qutoData.quantity);
        // this.$set(this.ruleForm, "deliveryDate", this.qutoData.deliveryDate);
        // this.$set(this.ruleForm, "dateCode", this.qutoData.dateCode);
        // this.$set(this.ruleForm, "deliveryPlace", this.qutoData.deliveryPlace);
    },
    methods: {
        // 选中人民币就选中国内
        changeOptions(parsms){
            console.log('tag',parsms)
            if(parsms == 1){
                this.ruleForm.deliveryPlace = 'FArea01'
            }else{
                this.ruleForm.deliveryPlace = 'FArea02'
            }
        },
        handlesupplierChange(v) {
            let sup = this.suppliers.find((x) => x.supplierID == v);
            if (sup) {
                this.ruleForm.supplierName = sup.supplierName;
            } else {
                this.ruleForm.supplierName = undefined;
            }
        },
        handleConfirmQuto() {
            this.btnLoading = true;
            this.$refs.form.validate((valid) => {
                if (valid) {
                    // 表示从搜商机过来的
                    // console.error(this.ruleForm);
                    if (this.isSommer) {
                        SearchClaim({
                            inquiryID: this.qutoData.id,
                            inquiryItemID: undefined,
                            unitPrice: this.ruleForm.unitPrice,
                            currency: this.ruleForm.currency,
                            quantity: this.ruleForm.quantity,
                            deliveryDate: this.ruleForm.deliveryDate,
                            dateCode: this.ruleForm.dateCode,
                            deliveryPlace: this.ruleForm.deliveryPlace,
                            supplierID: this.ruleForm.supplierID,
                            supplierName: this.ruleForm.supplierName,
                            summary: undefined,
                        })
                            .then((res) => {
                                if (res.status == 200) {
                                    this.$msgbox({
                                        title: "",
                                        message: "已收到您的申请，请等待采购确认后 进行报价",
                                        showCancelButton: true,
                                        confirmButtonText: "确定",
                                        cancelButtonText: "取消",
                                        customClass: "noname",
                                        center: true,
                                        dangerouslyUseHTMLString: true,
                                    }).then((action) => { });
                                    this.$emit("close");
                                    this.$message.success("报价成功");
                                    this.btnLoading = false;
                                    this.$store.dispatch("sidebars/getInquiryTotal", {
                                        userId: this.id
                                    });
                                }
                            })
                            .catch(() => {
                                this.btnLoading = false;
                            });
                    } else {
                        TaskQuote({
                            inquiryID: this.qutoData.id,
                            inquiryItemID: undefined,
                            unitPrice: this.ruleForm.unitPrice, // 报价
                            currency: this.ruleForm.currency, // currency
                            quantity: this.ruleForm.quantity, // 报价数量
                            deliveryDate: this.ruleForm.deliveryDate, // 交货日期
                            dateCode: this.ruleForm.dateCode, // 批次
                            deliveryPlace: this.ruleForm.deliveryPlace, // 交货地
                            supplierID: this.ruleForm.supplierID, // 报价公司
                            supplierName: this.ruleForm.supplierName, // 报价公司
                            termDate: this.ruleForm.termDate, // 报价有效期
                            summary: undefined,
                        })
                            .then((res) => {
                                if (res.status == 200) {
                                    this.$emit("close");
                                    this.$message.success("报价成功");
                                    this.$store.dispatch("sidebars/getInquiryTotal", {
                                        userId: this.id
                                    });
                                }
                                this.btnLoading = false;
                            })
                            .catch(() => {
                                this.btnLoading = false;
                            });
                    }
                } else {
                    this.btnLoading = false;
                }
            });
        },
        handleAccept() {
            // unitPrice 报价
            // currency  币种
            // quantity 报价数量
            // deliveryDate 交货日期
            // dateCode 批次
            // deliveryPlace  交货地
            // termDate 报价有效期
            // supplierID 报价公司
            if (this.isAccept) {
                this.$set(
                    this.ruleForm,
                    "unitPrice",
                    this.qutoData.unitPrice ? this.qutoData.unitPrice : 0
                );
                this.$set(this.ruleForm, "currency", this.qutoData.currency);
                this.$set(this.ruleForm, "quantity", this.qutoData.quantity);
                this.$set(this.ruleForm, "deliveryDate", this.qutoData.deliveryDate);
                this.$set(this.ruleForm, "dateCode", this.qutoData.dateCode);
                this.$set(this.ruleForm, "deliveryPlace", this.qutoData.deliveryPlace);
            } else {
                this.$refs["form"].resetFields();
            }
        },
        // 无法报价
        handleNotQuto() {
            this.btnLoading = true;
            this.$confirm("确认取消报价?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    UnableQuote({ ids: [this.qutoData.id], reason: "" }).then((res) => {
                        if (res.status == 200) {
                            this.$emit("close");
                            this.$message.success("操作成功");
                            this.$store.dispatch("sidebars/getInquiryTotal", {
                                userId: this.id
                            });
                        }
                        this.btnLoading = false;
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消操作",
                    });
                    this.btnLoading = false;
                });
        },
    },
    filters: {
        manageTime(v) {
            if (!v) {
                return v;
            } else {
                let hour = parseInt(v / 3600);
                let min = parseInt((v - hour * 60 * 60) / 60);
                let sec = parseInt((v % 3600) - min * 60);

                return `${hour < 10 ? "0" + hour : hour}:${min < 10 ? "0" + min : min
                    }:${sec < 10 ? "0" + sec : sec}`;
            }
        },
    },
    directives: {
        inpNum: {
            inserted: function (el, binding) {
                el.oninput = function (v) {
                    setTimeout(() => {
                        let value = v.target.value;
                        if (binding.modifiers.noquto) {
                            value = value.replace(/[^\d]+/g, "");
                        } else {
                            value = value.replace(/[^\d^\.]+/g, "");
                        }
                        v.target.value = value;
                    });
                };
            },
        },
        remainedTime: {
            inserted: function (el, binding) {
                let interval = null;
                let html = el.innerHTML;
                function timex() {
                    html = el.innerHTML;
                    if (!html.includes("已结束")) {
                        let v =
                            html.split(":")[0] * 3600 +
                            html.split(":")[1] * 60 +
                            html.split(":")[2] * 1;
                        v = v - 1;
                        if (v <= 0) {
                            el.innerHTML = "已结束";
                            binding.value.quoteRemainMin = 0;
                            interval || clearInterval(interval);
                        } else {
                            binding.value.quoteRemainMin = v;
                            let hour = parseInt(v / 3600);
                            let min = parseInt((v - hour * 60 * 60) / 60);
                            let sec = parseInt((v % 3600) - min * 60);
                            el.innerHTML = `${hour < 10 ? "0" + hour : hour}:${min < 10 ? "0" + min : min
                                }:${sec < 10 ? "0" + sec : sec}`;
                        }
                    }
                }
                if (!html.includes("已结束")) {
                    timex();
                    interval = setInterval(() => {
                        timex();
                    }, 1000);
                    if (interval) {
                        el.setAttribute("data", interval);
                    }
                }
            },
            unbind: function (el) {
                let data = el.getAttribute("data");
                if (data) {
                    clearInterval(data);
                }
            },
        },
    },
};
</script>
<style scoped lang="scss" src="@/assets/styles/public.scss"></style>
<style scoped lang="scss">
::v-deep .el-descriptions__header {
    color: #008fff;
    margin: 0 20px 20px 20px;
}

::v-deep .el-descriptions__body {
    margin: 0 20px;
    border: 1px solid #ccc;
    padding: 20px;
}

.el-form {
    margin: 0 20px;
    border: 1px solid #ccc;
    padding: 20px;

    ::v-deep .el-input,
    .el-select {
        width: 250px;
    }

    ::v-deep .el-form-item__label-wrap {
        margin-left: 0px !important;
    }

    .isAccept {
        ::v-deep .el-form-item__content {
            margin-left: 0px !important;
        }
    }

    .dateCode {
        ::v-deep .el-form-item__label-wrap {
            margin-left: 8px !important;
        }
    }

    ::v-deep .el-form-item__error {
        // top: 10px;
        left: 82px;
    }

    // .el-form-item {
    //     margin-bottom: 18px;
    // }

    ::v-deep .el-input__inner {
        text-align: left;
    }
}

.foot {
    margin: 10px 50px;
    display: flex;
    justify-content: center;
    padding: 10px 20px;
}
</style >
   